function Progress(el) {
	this.el = el;
	this.type = this.el.getAttribute('data-type');
	this.rate = this.el.getAttribute('data-rate');
	this.strokeColor = this.dynamicColor(100 - this.rate);
	this.strokeWidth = this.el.getAttribute('data-width') || 10;
	this.line = function () {
		var width = this.el.clientWidth;
		var totalLength = width - 10;
		var rate = totalLength - totalLength * this.rate / 100;
		var strokeColor = this.strokeColor;
		var strokeWidth = this.strokeWidth;
		var svgHtml =
			`<svg width="${width}" height="20"><line x1="10" y1="10" x2="${totalLength}" y2="10" fill="none" stroke-width="${strokeWidth}" stroke-linecap="round" stroke="#ccc" /><line id="line" x1="10" y1="10" x2="${totalLength}" y2="10" fill="none" stroke-width="${strokeWidth}" stroke-linecap="round" stroke="${strokeColor}" stroke-dasharray="${totalLength}" stroke-dashoffset="${totalLength}" stroke-linecap="round"/></svg>`;
		this.el.innerHTML = svgHtml;
		var line = this.el.querySelector('svg line:nth-of-type(2)');
		setTimeout(function () {
			line.style.strokeDashoffset = rate;
		}, 100)
	}
	this.circle = function () {
		var width = this.el.clientWidth;
		var totalLength = Math.ceil((width - 20) * Math.PI);
		var rate = totalLength - totalLength * this.rate / 100;
		var strokeColor = this.strokeColor;
		var strokeWidth = this.strokeWidth;
		var svgHtml =
			`<svg width="${width}" height="${width}"><circle cx="${width/2}" cy="${width/2}" r="${width/2-10}" fill="none" stroke="#ccc" stroke-width="${strokeWidth}" /><circle cx="${width/2}" cy="${width/2}" r="${width/2-10}" fill="none" stroke="${strokeColor}" stroke-width="${strokeWidth}" stroke-dasharray="${totalLength}" stroke-dashoffset="${totalLength}" stroke-linecap="round" /></svg>`;
		this.el.innerHTML = svgHtml;
		var rateEl = document.createElement('span')
		rateEl.className = 'rate';
		rateEl.innerText = '0%';
		rateEl.style.fontSize = 16 * width / 100 + 'px';
		this.el.appendChild(rateEl);
		var timeOut = this.rate;
		var count = 0;
		var timeer = setInterval(function () {
			count++;
			rateEl.innerText = count + '%';
			if (count == timeOut) {
				clearInterval(timeer);
			}
		}, 800 / timeOut)
		var circle = this.el.querySelector('svg circle:nth-of-type(2)');
		setTimeout(function () {
			circle.style.strokeDashoffset = rate;
		}, 100)
	}
	if (this.type === 'line') {
		this.line.call(this);
	} else {
		this.circle.call(this);
	}
}
Progress.prototype.dynamicColor = function dynamicColor(num) {
	num /= 100;
	return "rgb(" + Math.round(255 * (1 - num)) + ", " + Math.round(255 * num) + ", 150)";
}
var progress = document.querySelectorAll('.progress');
new Array().forEach.call(progress, function (v, i) {
	new Progress(v)
});
